<template>
  <div class="main-home">
    <viewer-container></viewer-container>
    <!-- 头部 -->
    <div class="header" style="z-index: 3;position: absolute;top: 0">
      <div class="h_left" id="leftMenu">
        <div class="tab " style="position: relative;">管线查询
          <div class="lis">
            <div @click="pointSearchShow=true">管点综合查询</div>
            <div @click="lineSearchShow=true">管线综合查询</div>
            <div @click="materialQueryShow=true">材质查询</div>
            <div @click="pipeDiameterQueryShow=true">管径查询</div>
            <div @click="lineGroupSearchShow=true">线组合查</div>
            <div @click="pointGroupSearchShow=true">点组合查</div>
            <div @click="burialDepthQueryShow=true">埋深查询</div>

          </div>
        </div>
        <div class="tab cen" style="position: relative;">管线统计
          <div class="lis">
            <div @click="classificationOfPointPropertiesShow=true">点性质统计</div>
            <div @click="pipeDiameterClassificationShow=true">管径分类统计</div>
            <div @click="materialClassificationShow=true">材质分类统计</div>
          </div>
        </div>
        <div class="tab " style="position: relative;">管线分析
          <div class="lis">
            <div @click="explosionTubeAnalysisIndex++">爆管分析</div>
            <div @click="crossSectionalAnalysisShow=true">横断面分析</div>
            <div @click="verticalAnalysisShow=true">纵断面分析</div>
            <div @click="distanceAnalysisShow=true">净距分析</div>
            <div @click="flowAnalysisShow=true">流向分析</div>
            <div @click="verticalDistanceShow=true">垂直净距分析</div>
            <div @click="soilCoverAnalysisShow=true">覆土分析</div>
          </div>
        </div>
      </div>
      <div class="h_center">兰图云平台三维城市地下管线信息系统</div>
      <!-- <div class="h_center"></div> -->
      <div class="h_right" id="rightMenu">
        <div class="tab cen" style="position: relative;">管线工具
          <div class="lis">
            <div @click="measureToolShow=true">图上量算</div>
            <div @click="spaceAnalysisShow=true">空间分析</div>
            <div @click="layerManagerShow=true">图层管理</div>
          </div>
        </div>
        <div class="tab cen" style="position: relative;">权限管理</div>
        <div class="tab " style="position: relative;">用户管理
          <div class="lis">
            <div>用户管理</div>
            <div>权限管理</div>
            <div @click="changePasswordShow=true">密码修改</div>
            <div @click="loginOut">退出系统</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 左边 -->
    <div class="left" style="z-index: 2;display: block" v-if="chartShow">
      <chart-panel :title="title" :chart-name="chartName" :show-select="false">
        <chart-one :id="'echarts_1'"></chart-one>
      </chart-panel>
      <chart-panel :title="title" :chart-name="chartName" :show-select="false">
        <chart-two :id="'echarts_2'"></chart-two>
      </chart-panel>
    </div>
    <!-- 右边 -->
    <div class="right" style="z-index: 2;display: block" v-if="chartShow">
      <chart-panel :title="title" :chart-name="chartName" :show-select="false">
        <chart-three :id="'echarts_3'"></chart-three>
      </chart-panel>
      <chart-panel :title="title" :chart-name="chartName" :show-select="false">
        <chart-four :id="'echarts_4'"></chart-four>
      </chart-panel>
    </div>
    <!--线路综合查询-->
    <window-container :title="'管线综合查询'" v-if="lineSearchShow" v-show="!lineSearchHidden"
                      @close="lineSearchShow=false">
      <line-search @hidden="lineSearchHidden=true" @show="lineSearchHidden=false"></line-search>
    </window-container>
    <!--管点综合查询-->
    <window-container :title="'管点综合查询'" v-if="pointSearchShow" v-show="!pointSearchHidden"
                      @close="pointSearchShow=false">
      <point-search @hidden="pointSearchHidden=true" @show="pointSearchHidden=false"></point-search>
    </window-container>
    <!--
    纵断面分析
    -->
    <vertical-section-analysis v-if="verticalAnalysisShow"
                               @quit="verticalAnalysisShow=false"></vertical-section-analysis>
    <!--横断面分析-->
    <cross-sectional-analysis v-if="crossSectionalAnalysisShow===true"
                              @quit="crossSectionalAnalysisShow=false"></cross-sectional-analysis>
    <!--  净距分析  -->
    <distance-analysis v-if="distanceAnalysisShow" @quit="distanceAnalysisShow=false"></distance-analysis>
    <!--   流向分析 -->
    <window-container class="flowAnalysisContainer" :title="'流向分析'" v-if="flowAnalysisShow"
                      @close="flowAnalysisShow=false">
      <flow-analysis></flow-analysis>
    </window-container>
    <!--爆管分析-->
    <explosion-tube-analysis :index="explosionTubeAnalysisIndex"
    ></explosion-tube-analysis>
    <!--垂直净距分析-->
    <vertical-distance-analysis v-if="verticalDistanceShow"
                                @quit="verticalDistanceShow=false"></vertical-distance-analysis>
    <!--材质分类    -->
    <window-container :title="'材质分类'" v-if="materialClassificationShow" v-show="!materialClassificationHidden"
                      @close="materialClassificationShow=false">
      <material-classification @hidden="materialClassificationHidden=true"
                               @show="materialClassificationHidden=false"></material-classification>
    </window-container>
    <!--    管径分类-->

    <window-container :title="'管径分类'" v-if="pipeDiameterClassificationShow"
                      v-show="!pipeDiameterClassificationHidden"
                      @close="pipeDiameterClassificationShow=false">
      <pipe-diameter-classification @hidden="pipeDiameterClassificationHidden=true"
                                    @show="pipeDiameterClassificationHidden=false"></pipe-diameter-classification>
    </window-container>
    <!--    点性质分类-->
    <window-container :title="'点性质分类'" v-if="classificationOfPointPropertiesShow"
                      v-show="!classificationOfPointPropertiesHidden"
                      @close="classificationOfPointPropertiesShow=false">
      <classification-of-point-properties @hidden="classificationOfPointPropertiesHidden=true"
                                          @show="classificationOfPointPropertiesHidden=false"></classification-of-point-properties>
    </window-container>
    <!--材质查询-->
    <window-container :title="'材质查询'" v-if="materialQueryShow"
                      v-show="!materialQueryHidden"
                      @close="materialQueryShow=false">
      <material-query @hidden="materialQueryHidden=true"
                      @show="materialQueryHidden=false"></material-query>
    </window-container>
    <!--管径查询-->
    <window-container :title="'管径查询'" v-if="pipeDiameterQueryShow"
                      v-show="!pipeDiameterQueryHidden"
                      @close="pipeDiameterQueryShow=false">
      <pipe-diameter-query @hidden="pipeDiameterQueryHidden=true"
                           @show="pipeDiameterQueryHidden=false"></pipe-diameter-query>
    </window-container>
    <!--    线组合查询-->
    <window-container class="groupLine" :title="'线组合查'" v-if="lineGroupSearchShow"
                      @close="lineGroupSearchShow=false">
      <line-group-search></line-group-search>
    </window-container>
    <!--    点组合查询-->
    <window-container class="groupLine" :title="'点组合查'" v-if="pointGroupSearchShow"
                      @close="pointGroupSearchShow=false">
      <point-group-search></point-group-search>
    </window-container>
    <!--    覆土分析-->
    <window-container :title="'覆土分析'" v-if="soilCoverAnalysisShow"
                      v-show="!soilCoverAnalysisHidden"
                      @close="soilCoverAnalysisShow=false">
      <soil-cover-analysis @hidden="soilCoverAnalysisHidden=true"
                           @show="soilCoverAnalysisHidden=false"></soil-cover-analysis>
    </window-container>
    <!--    埋深查询-->
    <window-container :title="'埋深查询'" v-if="burialDepthQueryShow"
                      v-show="!burialDepthQueryHidden"
                      @close="burialDepthQueryShow=false">
      <burial-depth-query @hidden="burialDepthQueryHidden=true"
                          @show="burialDepthQueryHidden=false"></burial-depth-query>
    </window-container>
    <!--地表透明-->
    <globe-alpha></globe-alpha>
    <!--    测量工具-->
    <measure-tool v-if="measureToolShow"></measure-tool>

    <!--空间分析-->
    <space-analysis v-if="spaceAnalysisShow"></space-analysis>

    <!--    图层管理-->
    <layer-manager v-if="layerManagerShow"></layer-manager>
    <!--修改密码-->
    <window-container class="changePassword" :title="'修改用户密码'" v-if="changePasswordShow"
                      @close="changePasswordShow=false">
      <change-password @quit="changePasswordShow=false"></change-password>
    </window-container>
  </div>
</template>

<script>
import crossSectionalAnalysis from "@/components/crossSectionalAnalysis.vue";
import materialQuery from "@/components/materialQuery.vue";
import materialClassification from "@/components/materialClassification.vue";
import verticalSectionAnalysis from "@/components/verticalSectionAnalysis.vue";
import measureTool from "@/components/measureTool.vue";
import windowContainer from "@/components/windowContainer.vue";
import globeAlpha from "@/components/globeAlpha.vue";
import flowAnalysis from "@/components/flowAnalysis.vue";
import pointSearch from "@/components/pointSearch.vue";
import chartTwo from "@/components/chartTwo.vue";
import chartFour from "@/components/chartFour.vue";
import chartOne from "@/components/chartOne.vue";
import lineSearch from "@/components/lineSearch.vue";
import spaceAnalysis from "@/components/spaceAnalysis.vue";
import viewerContainer from "@/components/viewerContainer.vue";
import chartPanel from "@/components/chartPanel.vue";
import chartThree from "@/components/chartThree.vue";
import classificationOfPointProperties from "@/components/classificationOfPointProperties.vue";
import pipeDiameterClassification from "@/components/pipeDiameterClassification.vue";
import layerManager from "@/components/layerManager.vue";
import pipeDiameterQuery from "@/components/pipeDiameterQuery.vue";
import explosionTubeAnalysis from "@/components/explosionTubeAnalysis.vue";
import distanceAnalysis from "@/components/distanceAnalysis.vue";
import dragDialog from "@/components/js/dragDialog";
import {removeCookie} from "@/assets/js/api";
import changePassword from "@/homeView/changePassword.vue";
import verticalDistanceAnalysis from "@/components/verticalDistanceAnalysis.vue";
import lineGroupSearch from "@/components/lineGroupSearch.vue";
import pointGroupSearch from "@/components/pointGroupSearch.vue";
import soilCoverAnalysis from "@/components/soilCoverAnalysis.vue";
import burialDepthQuery from "@/components/burialDepthQuery.vue";

export default {
  name: "homePage",
  components: {
    distanceAnalysis,
    explosionTubeAnalysis,
    pipeDiameterQuery,
    layerManager,
    pipeDiameterClassification,
    classificationOfPointProperties,
    chartThree,
    chartPanel,
    viewerContainer,
    spaceAnalysis,
    lineSearch,
    chartOne,
    chartFour,
    chartTwo,
    pointSearch,
    flowAnalysis,
    globeAlpha,
    windowContainer,
    measureTool,
    verticalSectionAnalysis,
    materialClassification,
    materialQuery,
    crossSectionalAnalysis,
    changePassword,
    verticalDistanceAnalysis,
    lineGroupSearch,
    pointGroupSearch,
    soilCoverAnalysis, burialDepthQuery
  },
  data() {
    return {
      chartShow: false,
      title: '企业信息',
      chartName: '图表名称',
      lineSearchShow: false,
      lineSearchHidden: false,
      pointSearchShow: false,
      pointSearchHidden: false,
      verticalAnalysisShow: false,
      distanceAnalysisShow: false,
      flowAnalysisShow: false,
      explosionTubeAnalysisIndex: 0,
      materialClassificationShow: false,
      materialClassificationHidden: false,
      pipeDiameterClassificationShow: false,
      pipeDiameterClassificationHidden: false,
      classificationOfPointPropertiesShow: false,
      classificationOfPointPropertiesHidden: false,
      crossSectionalAnalysisShow: false,
      materialQueryShow: false,
      materialQueryHidden: false,
      pipeDiameterQueryShow: false,
      pipeDiameterQueryHidden: false,
      measureToolShow: false,
      spaceAnalysisShow: false,
      layerManagerShow: false,
      changePasswordShow: false,
      verticalDistanceShow: false,  // 垂直净距分析
      lineGroupSearchShow: false,
      pointGroupSearchShow: false,
      soilCoverAnalysisShow: false,
      soilCoverAnalysisHidden: false,
      burialDepthQueryShow: false,
      burialDepthQueryHidden: false
    };
  },
  mounted() {
    // 获取URL参数
    let params = new URLSearchParams(window.location.search);
    // 获取特定参数的值
    let name = params.get('chart');
    if (name) {
      this.chartShow = true
    }

    document.addEventListener('click', () => {
      let doms = document.querySelector('body > div.layui-layer-page')
      if (!doms) {
        this.measureToolShow = false
        this.spaceAnalysisShow = false
        this.layerManagerShow = false
        return
      }
      let id = doms.id
      if (id.indexOf(layui - layer) >= 0) {
        dragDialog(id)
      } else {
        this.measureToolShow = false
        this.spaceAnalysisShow = false
        this.layerManagerShow = false
      }
    })
  },
  methods: {
    loginOut() {
      removeCookie()
    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>
<style src="../assets/css/index.css" scoped></style>
<style scoped>
.main-home {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
<style>
.header .lis div {
  font-size: 0.2rem !important;
  letter-spacing: -0.015rem;
}

.header .tab {
  font-size: 0.25rem !important;
}

.h_center {
  transform-origin: center;
  transform: scaleX(0.9);
}
</style>
<style>
.toolBarRight {
  right: -1000px !important;
}

#dbtm_pick .layui-col-md6 {
  margin-left: 5%;
  width: 60%;
}
</style>
<style src="../assets/css/tab.css"></style>
<style src="../assets/css/button.css"></style>
<style src="../assets/css/popup.css"></style>
<style src="../assets/css/table.css"></style>
<style src="../assets/css/globeAlpha.css"></style>
<style src="../assets/css/material.css"></style>
<style src="../assets/css/select.css"></style>
<style src="../assets/css/dialogBox.css"></style>
<style src="../assets/css/tool.css"></style>
